<template>
    <div class="app-container">
        <el-tabs v-model="type" @tab-change="data = []">
            <el-tab-pane label="通用商品属性配置" :name="1"></el-tab-pane>
            <el-tab-pane label="分类商品属性配置" :name="2"></el-tab-pane>
        </el-tabs>
        <component :is="type==1?Common:Classify" v-model:active="active" v-model:loading="loading" @init="init">
            <template #default>
                <el-empty v-if="!data.length&&!loading" description="暂无数据" />
                <Tree :data="data" :loading="loading" />
            </template>
        </component>
    </div>
</template>

<script setup>
import { ref } from "vue";
import Common from "./components/Common.vue";
import Classify from "./components/Classify.vue";
import { getList } from "@/apis/products/attribute";
import Tree from "./components/Tree";

const type = ref(1);
const data = ref([]);
const loading = ref(false)
const init = async (categoryId) => {
    const res = await getList({ type: type.value, categoryId });
    data.value = res.data;
    loading.value = false;
}
</script>

<style lang="scss" scoped>
.app-container {
    box-sizing: border-box;
}

::v-deep(.el-tabs__nav-wrap):after {
    height: 1px;
}
</style>